<template>
    <div class="password">
        <!-- 原密码输入框 -->
        <van-field v-model="oldPassword" placeholder="输入原密码"></van-field>

        <!-- 新密码输入框 -->
        <van-field v-model="newPassword" placeholder="输入新密码"></van-field>

        <span class="mark">密码长度 8-32 位，需包含数字和字母</span>

        <!-- 确认提交按钮 -->
        <van-button type="primary" block @click="changePassword"
            >确认提交</van-button
        >
    </div>
</template>

<script>
export default {
    data() {
        return {
            oldPassword: "",
            newPassword: ""
        };
    },
    methods: {
        async changePassword() {
            const { oldPassword, newPassword } = this;
            const res = await this.$http.put("/users/password", {
                oldPassword,
                newPassword
            });
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message
                });
                return;
            }
            this.$toast({
                type: "success",
                message: "密码修改成功"
            });
            // 跳转页面
            this.$router.push("/admin/my");
        }
    }
};
</script>

<style lang="less">
.password {
    height: 100%;
    padding: 0 8px;

    .van-field,
    .van-button {
        margin-top: 15px;
    }

    .mark {
        display: inline-block;
        font-size: 14px;
        margin-top: 10px;
        color: #ccc;
    }
}
</style>
